<template>
    <div class="map-view">
        <el-dialog :visible.sync="open" @close="close" title="" width="80%" :fullscreen="fullscreen" append-to-body>
            <template slot="title">
                <div class="dialog-title">
                    <span class="dialog-title-text">地图指挥</span>
                    <el-button type="text" @click="fullscreen = !fullscreen">
                        <i class="el-icon-full-screen"></i>
                    </el-button>
                </div>
            </template>
            <div id="map" ref="mapView" :style="renderViewStyle"></div>
        </el-dialog>
    </div>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
import MapTool from "@/plugins/esri/mapTool.js";
import mapUtils from "@/plugins/esri/mapUtils";

export default {
    name: "MapView",
    mixins: [dialogMixin],
    props: {
        // 坐标
        center: {
            type: Array,
            default: () => {
                return null;
            },
        },
    },
    data() {
        return {
            mapView: null,
            zoom: 1,
            mapTool: null,
            fullscreen: false,
            eventInfo: null,
        };
    },
    mounted() {},
    computed: {
        renderViewStyle() {
            // 宽为屏幕可是区域宽度的80%-40px
            if (!this.fullscreen) {
                return {
                    width: `${document.documentElement.clientWidth * 0.8 - 40}px`,
                    height: `${document.documentElement.clientHeight * 0.8 - 80}px`,
                };
            } else {
                return {
                    width: `${document.documentElement.clientWidth - 40}px`,
                    height: `${document.documentElement.clientHeight - 120}px`,
                };
            }
        },
    },
    methods: {
        showMap(param) {
            this.eventInfo = param.eventInfo;
            this.open = true;
            this.$nextTick(() => {
                this.getMap();
            });
        },
        getMap() {
            this.mapTool = new MapTool();
            this.mapTool.initMapView("map", { zoom: this.zoom }).then(res => {
                this.mapView = res;
                this.mapView.when(() => {
                    this.markEvent();
                });
            });
        },
        markEvent() {
            // 添加事件标记
            mapUtils.buildEventPoint({ center: this.eventInfo.eventCenter, attributes: {}, label: this.eventInfo.eventName }).then(marker => {
                this.mapTool.addLabelIconMarker(marker);
                this.mapTool.setCenter(this.eventInfo.eventCenter, 3);
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.dialog-title {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    .dialog-title-text {
        font-size: 16px;
        font-weight: bold;
        color: white;
        margin-right: 10px;
    }
}
</style>
